<template>
	<div class="c-c-panel" :class="{'et-row': type == 1, 'et-column': type == 2}">
		<div class="et-item"
			v-for="(item, tIndex) in data" 
			:style="{'background': (item.isShow == 0? '#E0E0E0' : item.atag.bgColor), 'color':item.atag.textColor}"
			:class="{'et-item-hide':item.isShow == 0}">
			<p 
				v-for="(name, nIndex) in JSON.parse(item.etNames)"
				v-text="name"
				>
			</p>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				etags: [],
				type: 1
			}
		},
		mounted() {
			var $this = this;
			for(var i=0; i<$this.data.length; i++) {
				var etag = $this.data[i];
				console.log(etag);
			}
		},
		methods: {
				
		},
		props: ['data', 'hideIndex']
	}
</script>

<style scoped="scoped">
	.c-c-panel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-wrap: wrap;
	}
	
	.et-row {
		flex-direction: row;
	}
	
	.et-column {
		flex-direction: column;
	}
	
	.et-item {
		margin-right: 6px;
		padding: 2px 5px;
		font-size: 12px;
		border-radius: 3px;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
	}
	
	.et-item-hide {
		border: 1px dashed #FF0000;
	}
</style>